<template>
    <div>
        <div @click="onroute">
            aaaaaaaa
        </div>
        <div style="position:relative;width: 600px;height: 400px;border: 1px solid #f00;margin-left: 300px;margin-top: 100px;"
            draggable="false">
            <div v-for="item in list" :key="item.id" class="dv" :imgId="item.id" @dragstart.prevent @dragover.prevent
                @mousedown="mousedown" :style="{ left: item.left, top: item.top }">
                >{{ item.id }}</div>
        </div>

    </div>
</template>

<script >
import { a, b } from '../../utils/exportTest'
console.log(a);
export default {
    name: "",
    data() {
        return {
            dv: '',
            x: '',
            y: '',
            l: '',
            t: '',
            list: [
                {
                    id: '1',
                    dvStyle: {
                        left: '50px',
                        top: '50px'
                    },
                    left: '50px',
                    top: '50px'
                },
                {
                    id: '2',
                    dvStyle: {
                        left: '100px',
                        top: '100px'
                    },
                    left: '100px',
                    top: '100px'
                }
            ],
            imgId: '',
        }
    },
    mounted() { },
    methods: {
        mousedown(e) {
            this.x = e.clientX;
            this.y = e.clientY;
            this.l = e.target.offsetLeft;
            this.t = e.target.offsetTop;
            this.imgId = e.target.getAttribute('imgId');
            document.addEventListener('mousemove', this.mousemove);
            document.addEventListener('mouseup', this.mouseup);
        },
        mousemove(e) {
            //获取x和y
            var nx = e.clientX;
            var ny = e.clientY;
            //计算移动后的左偏移量和顶部的偏移量
            var nl = nx - (this.x - this.l);
            var nt = ny - (this.y - this.t);
            // console.log(e.target.getAttribute("imgId"));
            let _this =this
            const moveIdx = this.list.findIndex(function (o) {
                return o.id === _this.imgId
            });
            console.log(moveIdx);
            this.list[moveIdx].left = nl + 'px';
            this.list[moveIdx].top = nt + 'px';
            // console.log(e.target.getAttribute("imgId"));
            // console.log(e.target);
            // e.target.style.left=nl + 'px';
            // e.target.style.top = nt + 'px';
            // this.dvStyle.left = nl + 'px';
            // this.dvStyle.top = nt + 'px';
            // console.log(this.imgId);
            // this.list = this.list.map((node, index) => {
            //     let dvStyle={
            //             left: nl + 'px',
            //             top: nt + 'px'
            //         }
                    // console.log(node.id);
                    // if (node.id === this.imgId) {
                    //     return node.dvStyle=dvStyle
                    // } else {
                    //     return node
                    // }
            //     return  node.dvStyle=dvStyle
                
            // })
        },
        mouseup(e) {
            let dv = this.$refs.dv;
            document.removeEventListener("mousemove", this.mousemove);
            document.removeEventListener("mouseup", this.mouseup);
        },
        onroute() {
            location.href = '/#/dragstart/index';
            // this.$router.replace({
            //     name: 'dragstart',
            //     query: {
            //         code: '123'
            //     }
            // })
        }
    }
}
</script>

<style scoped>
.dv {
    width: 40px;
    height: 40px;
    background-color: green;
    border-radius: 50%;
    position: absolute;
}
</style>
